<template>
    <!-- 根据数字渲染列表 -->
    <div v-for="(item, index) in 5">
        索引：{{ index }}，值：{{ item }}<br />
    </div>
    <hr />

    <!-- 根据一维数组生成一组标签 -->
    <div v-for="(item, index) in list_arr">
        索引：{{ index }}，值：{{ item }}<br />
    </div>
    <hr />

    <!-- 根据对象数组生成一组标签 -->
    <div v-for="item in list_obj">
        姓名：{{ item.name }}，年龄：{{ item.age }}<br />
    </div>
    <hr />

    <!-- 根据对象生成一组标签 -->
    <div v-for="(value, name) in list_object">
        属性名：{{ name }}，值：{{ value }}<br />
    </div>
</template>
<script setup>
import { reactive } from 'vue'
const list_arr = reactive(['HTML', 'css', 'JavaScript'])

const list_obj = reactive([
    { name: '张三', age: 20 },
    { name: '李四', age: 25 },
    { name: '王五', age: 15 }
])

const list_object = reactive({
    id: 1,
    name: '李四',
    age: 25,
})

</script>